<template>
  <div class="indivi_class">
    <div class="dance_content">
      <!-- 轮播图 -->
      <Swiper :bannerList="bannerList"></Swiper>

      <!-- 热门模块 -->
      <h4>热门推荐</h4>
      <MuiscList :muiscList="muiscList"></MuiscList>

      <!-- 独家放送 -->
      <h4>独家放送</h4>
      <PrivateContent :musicList="privatecontentList"></PrivateContent>

      <!-- 推荐新歌 -->
      <h4>推荐新歌</h4>
      <Newsong :musicList="newsongList"></Newsong>
    </div>
  </div>
</template>

<script>
import { _getBanner, _getMuisc, _getNewsong, _getPrivatecontent } from '../../network/recommend'
import Swiper from '../../components/common/swiper/Swiper.vue'
import MuiscList from '../../components/content/muisc-list/MuiscList.vue'
import PrivateContent from './children/PrivateContent.vue'
import Newsong from './children/Newsong.vue'
export default {
  name: 'Individuation',
  components: { Swiper, MuiscList, PrivateContent, Newsong },
  data() {
    return {
      bannerList: [], // 轮播图数据
      muiscList: [], // 热门推荐歌单
      privatecontentList: [], // 独家放送
      newsongList: [] // 推荐新歌
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      // 获取轮播图数据
      const bannerRes = await _getBanner()
      this.bannerList = bannerRes.data.banners.slice(0, 6)

      // 获取推荐歌单
      const muiscRes = await _getMuisc()
      this.muiscList = muiscRes.data.result.slice(0, 10)

      // 获取独家放送
      const privatecontentRes = await _getPrivatecontent()
      this.privatecontentList = privatecontentRes.data.result

      // 获取推荐新歌
      const newsongRes = await _getNewsong()
      console.log(newsongRes)
      this.newsongList = newsongRes.data.result
    }
  }
}
</script>

<style lang="less" scoped>
.indivi_class {
  margin: 0 auto;
  width: 80%;
  height: 100%;
  .dance_content {
    padding: 10px 0;
  }
}
</style>
